import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Checkbox, Row, Col, message } from 'antd';
import { UserOutlined, LockOutlined, SafetyOutlined, ReloadOutlined } from '@ant-design/icons';
import authApi from '../../api/auth';
import './LoginForm.scss';

interface LoginFormProps {
    onFinish?: (values: { username: string; password: string; remember: boolean; captcha?: string }) => void;
    loading?: boolean;
}

const LoginForm: React.FC<LoginFormProps> = ({ onFinish, loading = false }) => {
    const [form] = Form.useForm();
    const [captchaUrl, setCaptchaUrl] = useState<string>('');
    const [captchaLoading, setCaptchaLoading] = useState<boolean>(false);

    // 初始加载和刷新验证码
    useEffect(() => {
        refreshCaptcha();
    }, []);

    const refreshCaptcha = async () => {
        setCaptchaLoading(true);
        try {
            const url = await authApi.getCaptcha();
            if (url) {
                setCaptchaUrl(url);
            } else {
                message.error('获取验证码失败，请刷新重试');
            }
        } catch (error) {
            console.error('获取验证码失败:', error);
            message.error('获取验证码失败，请稍后重试');
        } finally {
            setCaptchaLoading(false);
        }
    };

    const handleFinish = (values: { username: string; password: string; remember: boolean; captcha?: string }) => {
        if (onFinish) {
            onFinish(values);
        }
    };

    return (
        <Form
            form={form}
            name="login"
            initialValues={{ username: '', password: '', remember: true }}
            onFinish={handleFinish}
            size="large"
            style={{ width: '100%' }}
        >
            <div className="form-item-wrapper">
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '请输入用户名' }]}
                    style={{ marginBottom: '16px' }}
                >
                    <Input
                        prefix={<UserOutlined />}
                        placeholder="用户名：admin"
                        autoComplete="username"
                        className="styled-input"
                    />
                </Form.Item>
            </div>

            <div className="form-item-wrapper">
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                    style={{ marginBottom: '16px' }}
                >
                    <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="密码：admin123"
                        autoComplete="current-password"
                        className="styled-password-input"
                    />
                </Form.Item>
            </div>

            <div className="form-item-wrapper">
                <Form.Item
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码' }]}
                    style={{ marginBottom: '16px' }}
                >
                    <Row gutter={8}>
                        <Col span={16}>
                            <Input
                                prefix={<SafetyOutlined />}
                                placeholder="验证码"
                                className="styled-input"
                            />
                        </Col>
                        <Col span={8}>
                            {captchaLoading ? (
                                <Button
                                    loading
                                    style={{ width: '100%', height: '38px' }}
                                >
                                    加载中
                                </Button>
                            ) : captchaUrl ? (
                                <img
                                    src={captchaUrl}
                                    alt="验证码"
                                    className="captcha-image"
                                    onClick={refreshCaptcha}
                                    title="点击刷新验证码"
                                    style={{ width: '100%', height: '38px', cursor: 'pointer' }}
                                />
                            ) : (
                                <Button
                                    onClick={refreshCaptcha}
                                    style={{ width: '100%', height: '38px' }}
                                    icon={<ReloadOutlined />}
                                >
                                    获取验证码
                                </Button>
                            )}
                        </Col>
                    </Row>
                </Form.Item>
            </div>

            <Form.Item style={{ marginBottom: '20px' }}>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>记住我</Checkbox>
                </Form.Item>

                <a style={{ float: 'right', color: '#1890ff' }} href="#">
                    忘记密码
                </a>
            </Form.Item>

            <Form.Item style={{ marginBottom: '0' }}>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                    block
                    className="styled-button"
                >
                    登录系统
                </Button>
            </Form.Item>
        </Form>
    );
};

export default LoginForm; 